<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
  <div class="root"></div>
  <!--
      beforeCreate（创建前） ：组件实例被创建之初，组件的属性生效之前
      created（创建后） ：组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
      beforeMount（挂载前） ：在挂载开始之前被调用：相关的 render 函数首次被调用
      mounted（挂载后） ：在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
      beforeUpdate（更新前） ：组件数据更新之前调用，真实DOM还没被渲染
      update（更新后） ：组件数据更新之后
      activated（激活前） ：keep-alive专属，组件被激活时调用
      deactivated（激活后） ：keep-alive专属，组件被销毁时调用
      beforeDestory（销毁前） ：组件销毁前调用
      destoryed（销毁后） ：组件销毁前调用
 -->
  <script>
    const vm = new Vue({
      el: '.root',
      data: {
        msg: '我是msg'
      },
      beforeCreate() {
        console.log('beforeCreate', this.$el, this.$data);
      },
      created() {
        console.log('created', this.$el, this.$data);
      },
      beforeCreate() {
        console.log(this.$el);
        // console.log(this);
        console.log(this.$data);

      },
      mounted() {
        console.log('mounted', this.$el, this.$data);
      },
      beforeUpdate() { },
      updated() { },
      beforeDestory() { },
      destoryed() { }

    })
  </script>
</body>

</html>